/* 1.过渡动画 */
@keyframes axisY {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translate(0px);
  }
}

@keyframes opcity {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* 2. 过渡类名 */
/* 开始 */
.header-enter-active {
  animation: axisY .25s ease-in-out;
}

/* 结束 */
.header-leave-active {
  /*
  进入和离开动画可以使用不同
  持续时间和速度曲线。
*/
  // animation: opcity .25s ease-in-out reverse;
  animation: opcity .25s ease;
}



// ---左侧移入-----------------------
.slide-left-enter-active,
.slide-left-leave-active {
  transition: all 0.3s ease-out;
}

.slide-left-enter-from,
.slide-left-leave-to {
  transform: translateX(-300px);
  opacity: 0;
}

// ---右侧移入-----------------------
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 0.3s ease-out;
}

.slide-right-enter-from,
.slide-right-leave-to {
  transform: translateX(300px);
  opacity: 0;
}

// ---顶部移入-----------------------
.slide-top-enter-active,
.slide-top-leave-active {
  transition: all 0.3s ease-out;
}

.slide-top-enter-from,
.slide-top-leave-to {
  transform: translateY(-300px);
  opacity: 0;
}

// ---底部移入-----------------------
.slide-bottom-enter-active,
.slide-bottom-leave-active {
  transition: all 0.3s ease-out;
}

.slide-bottom-enter-from,
.slide-bottom-leave-to {
  transform: translateY(300px);
  opacity: 0;
}

// ---渐隐减现-----------------------
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.6s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

// ---高度折叠-----------------------
.height-zero-enter-active,
.height-zero-leave-active {
  transition: all .5s ease;
}

.height-zero-enter-from,
.height-zero-leave-to {
  max-height: 0!important;
}

// 列表
.list-move,
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0!important;
  transform: translateY(30px);
}